{% extends "layout.html" %}

{% block content %}
<script src="../static/js/jquery.min.js" type="text/javascript" charset='utf-8'></script>
<script src="../static/js/echarts.js" charset='utf-8'></script>
<script src="../static/js/echarts-wordcloud.min.js" type="text/javascript" charset='utf-8'></script>

<script type="text/javascript">
    // 初始化界面
    $(function () {

        $('#li_1').attr('class', 'active');
        $('#li_2').attr('class', '');
        $('#li_3').attr('class', '');
        $('#li_4').attr('class', '');

        // 判断是否登录
        $.get('http://127.0.0.1:5001/check_login', {},
            function (data) {
                console.log(data);
                if (data['login'] === false) {
                    window.location.href = '/'
                }
                else {
                    $('#show_login_reg').hide();
                    $('#index_img').css('height', '95%');
                }
            }
        );

        $.get('http://127.0.0.1:5001/brand_car_count', {},
            function (data) {
                console.log(data);
                var dom = document.getElementById("main2");
                var myChart = echarts.init(dom);

                var option = {
                    backgroundColor: '#F9F9F9',
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        name: '车系数量',
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    xAxis: {
                        type: 'category',
                        data: data['keys'],
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            itemStyle: {
                                color: '#19CAAD'
                            },
                            data: data['counts']
                        }
                    ]
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        );

        $.get('http://127.0.0.1:5001/car_type_count/级别', {},
            function (data) {
                console.log(data);
                var dom = document.getElementById("main3");
                var myChart = echarts.init(dom);
                var series_data = [];
                for (var i = 0; i < data['keys'].length; i++) {
                    series_data.push({value: data['counts'][i], name: data['keys'][i]});
                }

                var option = {
                    backgroundColor: '#F9F9F9',
                    title: {
                        left: 'center',
                        text: '不同车型级别的汽车数量',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: '60%',
                            center: ['50%', '50%'],
                            data: series_data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        );

        $.get('http://127.0.0.1:5001/car_type_count/车身结构', {},
            function (data) {
                console.log(data);
                var dom = document.getElementById("main4");
                var myChart = echarts.init(dom);
                var series_data = [];
                for (var i = 0; i < data['keys'].length; i++) {
                    series_data.push({value: data['counts'][i], name: data['keys'][i]});
                }

                var option = {
                    backgroundColor: '#F9F9F9',
                    title: {
                        left: 'center',
                        text: '不同车身结构的汽车数量',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: '60%',
                            center: ['50%', '50%'],
                            data: series_data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        );

    });
</script>

<div class="container">
    <h3 class="page-header">不同汽车品牌的车系数量</h3>
    <div class="row placeholders" style="margin-top: 2px;">
        <div class="col-xs-12 placeholder" style="height:500px;" id="main2"></div>
    </div>
    <h3 class="page-header">汽车品牌的车系数量与汽车类型</h3>
    <div class="row placeholders" style="margin-top: 2px;">
        <div class="col-xs-6 placeholder" style="height:500px;" id="main3"></div>
        <div class="col-xs-6 placeholder" style="height:500px;" id="main4"></div>
    </div>
</div>
{% endblock %}
